import Icon from '@/components/Icon';
import { useAppSelector } from '@/store';
import {
  ArticlecollectionsAction,
  ArticlelikingsAction,
} from '@/store/action/articles';
import { Popup, Toast } from 'antd-mobile';
import { useState } from 'react';
import { useDispatch } from 'react-redux';
import CommentInput from '../CommentInput';
import styles from './index.module.scss';

export default function CommentFooter() {
  const dispatch = useDispatch();
  const { art_id, attitude, is_collected, comm_count } = useAppSelector(
    (state) => state.articles.ArtcleDetail
  );

  const { originComment } = useAppSelector((state) => state.comment);
  /** 点赞文章 */
  const handlelike = async () => {
    await dispatch(ArticlelikingsAction(art_id, attitude));
    Toast.show({
      icon: 'success',
      content: attitude === 1 ? '取消点赞成功' : '点赞成功',
    });
  };

  /** 收藏文章 */
  const handlecollected = async () => {
    await dispatch(ArticlecollectionsAction(art_id, is_collected));
    Toast.show({
      icon: 'success',
      content: is_collected ? '取消收藏成功' : '收藏成功',
    });
  };

  const [visible, setVisible] = useState(false);

  return (
    <div className={styles.root}>
      <div className="comment-footer">
        <div className="input-btn" onClick={() => setVisible(true)}>
          <Icon type="iconbianji" />
          <span>去评论</span>
        </div>

        {!originComment.com_id && (
          <>
            <div className="action-item">
              <Icon type="iconbtn_comment" />
              <p>评论</p>
              {!!comm_count && <span className="bage">{comm_count}</span>}
            </div>
            {/* 'iconbtn_like2' */}
            <div className="action-item" onClick={handlelike}>
              <Icon
                type={attitude === 1 ? 'iconbtn_like_sel' : 'iconbtn_like2'}
              />
              <p>点赞</p>
            </div>
          </>
        )}
        <div className="action-item" onClick={handlecollected}>
          {/* 'iconbtn_collect' */}
          <Icon
            type={is_collected ? 'iconbtn_collect_sel' : 'iconbtn_collect'}
          />
          <p>收藏</p>
        </div>
        <div className="action-item">
          <Icon type="iconbtn_share" />
          <p>分享</p>
        </div>

        <Popup
          visible={visible}
          destroyOnClose
          position="bottom"
          bodyStyle={{ minHeight: '100vh' }}
        >
          <CommentInput onBack={() => setVisible(false)}></CommentInput>
        </Popup>
      </div>
    </div>
  );
}
